<template>
  <div class="book">
    <div :style="effectStyle" class="effect">
      <div class="horn" :style="hornStyle">
        <div
          :style="hornConStyle"
        >222222222222222228888888888888888888888888888889999999999999999999999999999999999999999999999999998</div>
      </div>
    </div>
    <div class="page" ref="page">
      <div :style="effectStyle">
        <div
          :style="contentStyle"
          @touchstart.stop.prevent="mousedown"
          @touchend.stop.prevent="mouseup"
          @touchmove.stop.prevent="touchmove"
        >11111111111111111111111111111111114444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/minxs/mixin.js";
import mounted from "./mounted";
export default {
  data() {
    return {
      effectStyle: {},
      hornStyle: {},
      contentStyle: {},
      hornConStyle: {}
    };
  },
  mounted,
  mixins: [mixin],
  methods: {
    // 获取事件触发位置
    getEventPosition({ pageX, pageY }) {
      let clientWidth = document.body.clientWidth;
      let clientHeight = document.body.clientHeight;
      // 获取操作dom 距离屏幕边距
      clientWidth = (clientWidth - this.clientWidth) / 2; //+ (this.sqrt - this.clientWidth) / 2;
      clientHeight = (clientHeight - this.clientHeight) / 2;
      let cx1 = this.clientWidth / 3;
      let cx2 = this.clientWidth - cx1;
      let cy1 = this.clientHeight / 3;
      let cy2 = this.clientHeight - cy1;
      let px = pageX - clientWidth;
      let py = pageY - clientHeight;
      if (px < cx1 && py < cy1) this.position = "lt";
      if (px > cx2 && py < cy1) this.position = "rt";
      if (px > cx1 && py > cy1) this.position = "rb";
      if (px < cx2 && py > cy1) this.position = "lb";
      // 测试先右上角
      this.initDIV();
      this.setTransformOrigin();
      if (this.position == "lt") {
        this.moveOption = {
          startX: 0,
          startY: 0
        };
      } else if (this.position == "rt") {
        this.moveOption = {
          startX: this.clientWidth,
          startY: 0
        };
      } else if (this.position == "rb") {
        this.moveOption = {
          startX: this.clientWidth,
          startY: this.clientHeight
        };
      } else if (this.position == "lb") {
        this.moveOption = {
          startX: 0,
          startY: this.clientHeight
        };
      }
      this.moveOption.moveX = 0;
      this.moveOption.moveY = 0;
    },
    touchmove(e) {
      let clientWidth = document.body.clientWidth;
      let clientHeight = document.body.clientHeight;
      // 获取操作dom 距离屏幕边距
      clientWidth = (clientWidth - this.clientWidth) / 2; //+ (this.sqrt - this.clientWidth) / 2;
      clientHeight = (clientHeight - this.clientHeight) / 2;
      this.moveOption.moveX = e.targetTouches[0].pageX - clientWidth; //2; // - (this.sqrt - this.clientWidth * 2) / 2;
      this.moveOption.moveY = e.targetTouches[0].pageY - clientHeight; //2;
      let angle = this.getAngle({
        ...this.moveOption
      });
      // 方块移动比例 x/X = y/Y
      // 小 x y z
      let SDX;
      if (this.position == "rt" || this.position == "rb") {
        SDX = Math.abs(this.moveOption.moveX - this.clientWidth) / 2;
      } else if (this.position == "lt" || this.position == "lb") {
        SDX = Math.abs(this.moveOption.moveX) / 2;
      }
      let SDY;
      if (this.position == "rt" || this.position == "lt") {
        SDY = this.moveOption.moveY / 2;
      } else if (this.position == "rb" || this.position == "lb") {
        SDY = Math.abs(this.clientHeight - this.moveOption.moveY) / 2;
      }
      let SDZ = Math.sqrt(Math.pow(SDX, 2) + Math.pow(SDY, 2));
      // 大 x y z
      let BIGSDZ;
      BIGSDZ = this.clientWidth - SDY / (SDX / SDY) - SDX; //大的
      BIGSDZ = BIGSDZ > 0 ? BIGSDZ : 0;
      let BL = BIGSDZ / SDZ; // 比例
      let BIGSDY = SDY * BL;
      let BIGSDX = SDX * BL; //大的
      let moveOption;
      let TSDX = 0,
        TSDY = 0;
      if (BIGSDZ > 0) {
        moveOption = this.hypotenuse(BIGSDX, 90 - angle);
        TSDX = moveOption.x;
        TSDY = moveOption.y;
      }
      if (this.position == "rt") {
        this.updateContentMainStyle(TSDX, -TSDY, -angle);
        // 内容区域数据更新
        this.updateContentStyle(-TSDX, TSDY, -angle);
      } else if (this.position == "rb") {
        this.updateContentMainStyle(TSDX, TSDY, angle);
        // 内容区域数据更新
        this.updateContentStyle(-TSDX, -TSDY, angle);
      } else if (this.position == "lb") {
        this.updateContentMainStyle(-TSDX, TSDY, -angle);
        // 内容区域数据更新
        this.updateContentStyle(TSDX, -TSDY, -angle);
      } else if (this.position == "lt") {
        this.updateContentMainStyle(-TSDX, -TSDY, angle);
        // 内容区域数据更新
        this.updateContentStyle(TSDX, TSDY, angle);
      }
      // 边角更新
      let radian = ((2 * Math.PI) / 360) * (90 - angle);
      let YK = SDY * Math.tan(radian) + SDX;
      // SDY  SDX
      // 得到 X 相对于 遮罩层
      let MOption = this.hypotenuse(YK, angle);
      let MX, MY;
      MY = MOption.y; // ok
      // 已知高度和角度 求对边
      // 弧度
      MX = MY * Math.tan(radian) + BIGSDY;
      let maxHornObtion = this.hypotenuse(this.clientWidth, angle);
      if (maxHornObtion.y <= MY) {
        MX = maxHornObtion.x;
        MY = maxHornObtion.y;
      }

      let BGIMGX = this.clientWidth - BIGSDZ;
      let BGIMGY;
      console.log(SDX / SDY)
      let XYBL = 1
      // 边角动画
      if (this.position == "rt") {
        radian = ((2 * Math.PI) / 360) * ( 90 - angle );
        BGIMGY = BGIMGX * Math.tan(radian); // + "%";
        BGIMGY = (BGIMGY * 100 ) / this.clientHeight;
        BGIMGX = (BGIMGX * 100 ) / this.clientWidth;

        console.log("++++", BGIMGY);
        BGIMGX = BGIMGX * XYBL + "%";
        BGIMGY = BGIMGY * XYBL + "%";
        console.log(BGIMGY);
        this.updateHornStyle(
          MX,
          MY,
          angle + 180,
          this.setBackgroundImage({
            PX: "0%",
            PY: "0%",
            X: BGIMGX,
            Y: BGIMGY
          })
        );
      } else if (this.position == "lt") {
        // BGIMGX = (BGIMGX * 100) / this.clientWidth + "%";
        // BGIMGY = (BGIMGX * Math.tan(radian) * 100) / this.clientHeight + "%";

        this.updateHornStyle(
          -MX,
          MY,
          -angle + 180,
          this.setBackgroundImage({
            PX: "100%",
            PY: "0%",
            X: BGIMGX,
            Y: BGIMGY
          })
        );
      } else if (this.position == "rb") {
        this.updateHornStyle(
          MX,
          -MY,
          -angle + 180,
          this.setBackgroundImage({
            PX: "0%",
            PY: "0%",
            X: BGIMGX,
            Y: BGIMGY
          })
        );
      } else if (this.position == "lb") {
        this.updateHornStyle(
          -MX,
          -MY,
          angle + 180,
          this.setBackgroundImage({
            PX: "100%",
            PY: "0%",
            X: BGIMGX,
            Y: BGIMGY
          })
        );
      }
    },
    //
    mouseup(e) {
      console.log("释放");
      // window.requestAnim(frame)

      // console.log(e.targetTouches[0].pageY)
      // console.log(e.targetTouches[0].pageX)
    },
    mousedown(e) {
      this.getEventPosition({
        pageX: e.targetTouches[0].pageX,
        pageY: e.targetTouches[0].pageY
      });
    }
  }
};

window.requestAnim = (function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
@import "./index.less";
</style>
